<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <p class="my-p"></p>
    <script>
        // 目标: 使用XMLHttpRequest对象与服务器通信
        //  1.创建 XMLHttpRequest 对象
        //  2.配置请求方法和请求 url 地址
        //  3，监听 loadend 事件，接收响应结果
        //  4，发起请求


        //  1.创建 XMLHttpRequest 对象
        const xhr = new XMLHttpRequest()

        //  2.配置请求方法和请求 url 地址
        xhr.open('GET', 'http://hmajax.itheima.net/api/province')

        //  3，监听 loadend 事件，接收响应结果
        xhr.addEventListener('loadend', () => {
            console.log(xhr.response);
            /** 
             * log结果：对象格式
             * {"message":"获取省份成功","list":["北京","天津","河北省","山西省","内蒙古自治区","辽宁省","吉林省","黑龙江省","上海","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","广西壮族自治区","海南省","重庆","四川省","贵州省","云南省","西藏自治区","陕西省","甘肃省","青海省","宁夏回族自治区","新疆维吾尔自治区","台湾","香港特别行政区","澳门特别行政区"]}
             * 
             */
            const data = JSON.parse(xhr.response)
            console.log(data);
            /** 
             * log结果：数组格式
             * list: (34) ['北京', '天津', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾', '香港特别行政区', '澳门特别行政区']
message: "获取省份成功"
            */
            console.log(data.list)
                //(34) ['北京', '天津', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾', '香港特别行政区', '澳门特别行政区']

            // 数组转字符串
            console.log(data.list.join('<br>')); //北京<br>天津<br>河北省<br>山西省<br>内蒙古自治区<br>辽宁省<br>吉林省<br>黑龙江省<br>上海<br>江苏省<br>浙江省<br>安徽省<br>福建省<br>江西省<br>山东省<br>河南省<br>湖北省<br>湖南省<br>广东省<br>广西壮族自治区<br>海南省<br>重庆<br>四川省<br>贵州省<br>云南省<br>西藏自治区<br>陕西省<br>甘肃省<br>青海省<br>宁夏回族自治区<br>新疆维吾尔自治区<br>台湾<br>香港特别行政区<br>澳门特别行政区
            //显示在页面上
            document.querySelector('.my-p').innerHTML = data.list.join('<br>')

        })

        //  4，发起请求
        xhr.send()
    </script>
</body>

</html>